<script setup>
import {ref} from "vue";
import request from '@/utils/request';
import {ElMessage} from "element-plus";

// const VehicleType = ref('');

// const user = ref(getUser());

const addApplication = ref({
    name: '',
  phone: '',
  cityName: '',
  carType: ''
});

const saveApplication = ()=>{
  let url = `/application/save`;
  request.post(url, addApplication.value).then((response)=>{
    if (response.code===200){
      ElMessage.success('申请成功');
      saveApplication.value = response.data;
    }else {
      ElMessage.error('申请失败:');
    }
  })
}

</script>

<template>
  <div class="slogo">
    <h1 style="font-size: 40px;color: #fff;font-weight: 700;">企业租车解决方案</h1>
  </div>
  <ul class="scheme">
    <li>
      <h2>管家服务</h2>
      <p>
        全国3000+车管家
        <br>
        行政级服务标准
      </p>
    </li>
    <li>
      <h2>牌照资源</h2>
      <p>
        限牌城市
        <br>
        丰富的牌照储备
      </p>
    </li>
    <li>
      <h2>优质资源</h2>
      <p>
        绿色共享优势
        <br>
        价格低于市场10%以上
      </p>
    </li>
    <li>
      <h2>定制方案</h2>
      <p>
        时租/日租/月租/年租
        <br>
        用车场景全覆盖
      </p>
    </li>
    <li>
      <h2>高效管理</h2>
      <p>
        “企业云”后台
        <br>
        精准调度，集中管理
      </p>
    </li>
  </ul>
  <div style="display: block;width: 600px;margin: 0 auto 140px;">
    <div class="web-title">
      <h3 class="web-title__text">
        您想租什么类型的车辆呢
      </h3>
      <h5 class="web-title__desc">请留下联系方式，我们会尽快联系您，提供专人管家服务</h5>
    </div>
    <div class="ogy-form">
      <el-input placeholder="姓名" v-model="addApplication.name" style="margin-bottom: 10px;height: 60px;"></el-input>
      <el-input placeholder="手机号码" v-model="addApplication.phone" style="margin-bottom: 10px;height: 60px;"></el-input>
      <el-input placeholder="用车城市" v-model="addApplication.cityName" style="margin-bottom: 10px;height: 60px;"></el-input>
      <el-select  placeholder="请选择车辆类型" size="large" v-model="addApplication.carType"
                 style="margin-bottom: 30px;" clearable>
        <el-option value="经济型" label="经济型"></el-option>
        <el-option value="舒适型" label="舒适型"></el-option>
        <el-option value="SUV型" label="SUV型"></el-option>
        <el-option value="MPV型" label="MPV型"></el-option>
        <el-option value="豪华型" label="豪华型"></el-option>
      </el-select>
    </div>
    <el-button class="submit" type="primary" @click="saveApplication">提交申请</el-button>
  </div>
  <div class="company-rent-scenes">
    <div class="web-title">
      <h3 class="web-title__text">覆盖企业用车主要场景</h3>
    </div>
    <div class="list">
      <div class="item">
        <h4 style="font-size: 23px;color: #fff;font-weight: 700;margin-bottom: 5px;">企业短租</h4>
        <p style="font-size: 13px;color: #fff;line-height: 20px;height: 40px">万款车型 APP自主下单</p>
      </div>
      <div class="item">
        <h4 style="font-size: 23px;color: #fff;font-weight: 700;margin-bottom: 5px;">企业长租</h4>
        <p style="font-size: 13px;color: #fff;line-height: 20px;height: 40px">30天起特惠套餐 APP自主下单
          <br>
          专人服务 定向寻找目标车型
        </p>
      </div>
      <div class="item">
        <h4 style="font-size: 23px;color: #fff;font-weight: 700;margin-bottom: 5px;">商务自驾</h4>
        <p style="font-size: 13px;color: #fff;line-height: 20px;height: 40px">特色商务车型套餐</p>
      </div>
      <div class="item">
        <h4 style="font-size: 23px;color: #fff;font-weight: 700;margin-bottom: 5px;">会务会议</h4>
        <p style="font-size: 13px;color: #fff;line-height: 20px;height: 40px">可选代驾模式</p>
      </div>
    </div>
  </div>
  <div class="company-rent-solution">
    <div class="web-title">
      <h3 class="web-title__text">帮助业务解决租车痛点</h3>
    </div>
    <div class="list_clearfix">
      <div class="item_clearfix" style="float: left">
        <i>01</i>
        <h4>降低固定资产投入</h4>
        <p>有效弱化/避免车辆购置的重资模式，解放资金</p>
      </div>
      <div class="item_clearfix" style="float: right">
        <i>02</i>
        <h4>降低车队管理成本</h4>
        <p>由专业、高效的外部车队管理代替高成本的企业自营车队</p>
      </div>
      <div class="item_clearfix" style="float: left">
        <i>03</i>
        <h4>控制企业出行成本</h4>
        <p>专业的“企业云”共享后台，合理规划&控制员工出行成本</p>
      </div>
      <div class="item_clearfix" style="float: right">
        <i>04</i>
        <h4>制定化解决方案</h4>
        <p>按照企业用车需求，制定专属产品方案</p>
      </div>
      <div class="item_clearfix" style="float: left">
        <i>05</i>
        <h4>提高出行用车体验</h4>
        <p>优质的车源、专业管家服务及完善的管理体系提高出行体验</p>
      </div>
      <div class="item_clearfix" style="float: right">
        <i>06</i>
        <h4>优化出行效率</h4>
        <p>全程跟进用车过程的即时需求，快速响应，高效处理</p>
      </div>

    </div>
  </div>
  <div class="company-rent-car-types">
    <div class="web-title">
      <h3 class="web-title__text">企业长租车型</h3>
    </div>
    <div class="long_rent">
      <div class="swiper-wrapper" style="transition-duration: 0ms;transform: translate3d(0px, 0px, 0px);">
        <div class="item-jingji" style="width: 245px;margin-right: 15px;">
          <i class="thumb1"></i>
          <h4 style="font-size: 18px;color: #fff;font-weight: 700;margin: 0;">经济型</h4>
          <p style="font-size: 13px;color: #fff;margin: 0;">
            <span style="font-size: 36px;">2700</span>
            元起/月
          </p>
          <del style="font-size: 13px;color: #fff;opacity: .5;">
            6000元起/月
          </del>
          <div class="detail">
            <p>车型分类</p>
            <p>大众朗逸、丰田卡罗拉、福特福克斯等</p>
          </div>
        </div>

        <div class="item-suv" style="width: 245px;margin-right: 15px;">
          <i class="thumb2"></i>
          <h4 style="font-size: 18px;color: #fff;font-weight: 700; margin: 0;">SUV</h4>
          <p style="font-size: 13px;color: #fff;margin: 0;">
            <span style="font-size: 36px;">5500</span>
            元起/月
          </p>
          <del style="font-size: 13px;color: #fff;opacity: .5;">
            9000元起/月
          </del>
          <div class="detail">
            <p>车型分类</p>
            <p>大众途观、丰田RAV4、本田CRV等</p>
          </div>
        </div>

        <div class="item-shushi" style="width: 245px;margin-right: 15px;">
          <i class="thumb3"></i>
          <h4 style="font-size: 18px;color: #fff;font-weight: 700; margin: 0;">舒适型</h4>
          <p style="font-size: 13px;color: #fff;margin: 0;">
            <span style="font-size: 36px;">5500</span>
            元起/月
          </p>
          <del style="font-size: 13px;color: #fff;opacity: .5;">
            9000元起/月
          </del>
          <div class="detail">
            <p>车型分类</p>
            <p>大众帕萨特、丰田凯美瑞、本田雅阁等</p>
          </div>
        </div>

        <div class="item-mpv" style="width: 245px;margin-right: 15px;">
          <i class="thumb4"></i>
          <h4 style="font-size: 18px;color: #fff;font-weight: 700; margin: 0;">MPV</h4>
          <p style="font-size: 13px;color: #fff;margin: 0;">
            <span style="font-size: 36px;">6500</span>
            元起/月
          </p>
          <del style="font-size: 13px;color: #fff;opacity: .5;">
            12000元起/月
          </del>
          <div class="detail">
            <p>车型分类</p>
            <p>别克GL8、本田奥德赛、大众途安等</p>
          </div>
        </div>

        <div class="item-haohua" style="width: 245px;margin-right: 15px;">
          <i class="thumb5"></i>
          <h4 style="font-size: 18px;color: #fff;font-weight: 700; margin: 0;">舒适型</h4>
          <p style="font-size: 13px;color: #fff;margin: 0;">
            <span style="font-size: 36px;">10000</span>
            元起/月
          </p>
          <del style="font-size: 13px;color: #fff;opacity: .5;">
            15000元起/月
          </del>
          <div class="detail">
            <p>车型分类</p>
            <p>奥迪A6L、奔驰E级、宝马5系等</p>
          </div>
        </div>
      </div>
    </div>
    <button class="swiper-btn swiper-btn-left"></button>
    <button class="swiper-btn swiper-btn-right"></button>
  </div>
  <div class="company-rent-partner">
    <div class="web-title">
      <h3 class="web-title__text">
        合作企业
      </h3>
    </div>
    <div class="cooperative">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
    </div>
  </div>
</template>

<style scoped>

body div {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

ul {
  list-style: none;
}

.slogo {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 440px;
  background: url("https://www.atzuche.com/static/media/banner.0d189fec.jpg") 50%;
  background-size: cover;
  position: relative;
}

.slogo:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(hsla(0, 0%, 100%, 0), #fff 80%);
}

.scheme {
  display: flex;
  width: 1024px;
  margin: 0 auto;
  justify-content: space-between;
}

.web-title {
  display: block;
  margin-bottom: 40px;
}

.scheme li {
  background: url("") center 10px no-repeat;
  background-size: 50px auto;
  padding-top: 80px;
  width: 140px;
}

.scheme h2 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 5px;
}

.scheme p {
  font-size: 13px;
  text-align: center;
  color: #666;
}

.web-title__text {
  font-size: 24px;
  color: #333;
  text-align: center;
  font-weight: 400;
}

.web-title__text:after {
  content: "";
  display: block;
  background: linear-gradient(90deg, #55ce92, #3ac38e);
  width: 25px;
  height: 4px;
  border-radius: 2px;
  margin: 6px auto 15px;
}

.web-title__desc {
  text-align: center;
  font-size: 14px;
  color: #999;
  font-weight: 400;
}

.submit {
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  padding: 0 100px;
  font-size: 16px;
  display: block;
}

.company-rent-scenes {
  display: block;
  width: 1024px;
  margin: 0 auto 140px;
}

.web-title__text {
  font-size: 24px;
  color: #333;
  text-align: center;
  font-weight: 400;
}

.list {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(1) {
  background: url("https://www.atzuche.com/static/media/pic-1.6da21915.jpg") #999;
  background-size: 100% 100%;
  width: 185px;
  height: 400px;
  border-radius: 20px;
  padding: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.item:nth-child(2) {
  background: url("https://www.atzuche.com/static/media/pic-2.4296d4c1.jpg") #999;
  background-size: 100% 100%;
  width: 185px;
  height: 400px;
  border-radius: 20px;
  padding: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.item:nth-child(3) {
  background: url("https://www.atzuche.com/static/media/pic-3.9ca515ad.jpg") #999;
  background-size: 100% 100%;
  width: 185px;
  height: 400px;
  border-radius: 20px;
  padding: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.item:nth-child(4) {
  background: url("https://www.atzuche.com/static/media/pic-4.4ba522b8.jpg") #999;
  background-size: 100% 100%;
  width: 185px;
  height: 400px;
  border-radius: 20px;
  padding: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.company-rent-solution {
  display: block;
  width: 1024px;
  margin: 0 auto 105px;
}

.list_clearfix{
  margin-right: -35px;
}

.list_clearfix:before{
  display: block;
  height: 0;
  overflow: hidden;
}

.list_clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.item_clearfix{
  width: 363px;
  height: 130px;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0,188,147,.2);
  padding-left: 130px;
  margin: 0 35px 35px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.item_clearfix h4{
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 5px;
}

.item_clearfix p{
  font-size: 13px;
  color: #666;
}

.item_clearfix i{
  color: #00bc93;
  font-size: 55px;
  font-weight: 100;
  font-style: italic;
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%) skewX(13.5deg);
}

.company-rent-car-types{
  display: block;
  width: 1359.5px;
  margin: 0 auto 100px;
  position: relative;
}

.long_rent{
  width: 1374px;
  overflow: hidden;
  padding: 40px 0;
  margin-top: -40px;
}

.swiper-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.item-jingji{
  background: linear-gradient(150deg, #009b92, #2fe5a2);
  box-shadow: 0 0 25px rgba(0,147,136,.2);
  display: flex;
  flex-direction: column;
  height: 300px;
  border-radius: 20px;
  padding: 20px 30px 30px;
  position: relative;
}
.item-suv{
  background: linear-gradient(150deg, #e8566e, #fb8971);
  box-shadow: 0 0 25px rgba(255,51,51,.2);
  display: flex;
  flex-direction: column;
  height: 300px;
  border-radius: 20px;
  padding: 20px 30px 30px;
  position: relative;
}
.item-shushi{
  background: linear-gradient(150deg, #0693c7, #1cd3d1);
  box-shadow: 0 0 25px rgba(13,126,163,.2);
  display: flex;
  flex-direction: column;
  height: 300px;
  border-radius: 20px;
  padding: 20px 30px 30px;
  position: relative;
}
.item-mpv{
  background: linear-gradient(150deg, #687888, #98a9bd);
  box-shadow: 0 0 25px rgba(7,73,135,.2);
  display: flex;
  flex-direction: column;
  height: 300px;
  border-radius: 20px;
  padding: 20px 30px 30px;
  position: relative;
}
.item-haohua{
  background: linear-gradient(150deg, #cd9d60, #dccb86);
  box-shadow: 0 0 25px rgba(154,91,4,.2);
  display: flex;
  flex-direction: column;
  height: 300px;
  border-radius: 20px;
  padding: 20px 30px 30px;
  position: relative;
}

.thumb1{
  background: url("https://www.atzuche.com/static/media/car-1.b30ff601.png");
  background-size: 100% 100%;
  width: 180px;
  height: 90px;
  display: block;
  margin-bottom: 15px;
}
.thumb2{
  background: url("https://www.atzuche.com/static/media/car-5.83d8429e.png");
  background-size: 100% 100%;
  width: 180px;
  height: 90px;
  display: block;
  margin-bottom: 15px;
}
.thumb3{
  background: url("https://www.atzuche.com/static/media/car-2.afc700ff.png");
  background-size: 100% 100%;
  width: 180px;
  height: 90px;
  display: block;
  margin-bottom: 15px;
}
.thumb4{
  background: url("https://www.atzuche.com/static/media/car-4.f8f77625.png");
  background-size: 100% 100%;
  width: 180px;
  height: 90px;
  display: block;
  margin-bottom: 15px;
}
.thumb5{
  background: url("https://www.atzuche.com/static/media/car-3.4e4086c0.png");
  background-size: 100% 100%;
  width: 180px;
  height: 90px;
  display: block;
  margin-bottom: 15px;
}

.detail{
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 30px 30px;
}

.detail p{
  margin-top: 10px;
  font-size: 13px;
  color: #fff;
}

.swiper-btn{
  width: 60px;
  height: 60px;
  display: block;
  background: #fff url("") 50% no-repeat;
  background-size: 20px;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(21,47,79,.2);
  position: absolute;
  left: -90px;
  bottom: 180px;
  cursor: pointer;
  border: none;
}
.swiper-btn.swiper-btn-right {
  left: auto;
  right: -90px;
  background: #fff url("") 50% no-repeat;
  background-size: 20px;
}

.company-rent-partner{
  display: block;
  width: 1024px;
  margin: 0 auto 92px;
}

.cooperative{
  overflow: hidden;
  margin-right: -48px;
}

.cooperative img{
  float: left;
  display: block;
  width: 220px;
  height: 75px;
  margin: 0 48px 48px 0;
}


</style>

<style>
.ogy-form .el-select--large .el-select__wrapper{
  min-height: 60px;
}
</style>